<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			::-webkit-scrollbar {
				display: none;
			}

			html,
			body {
				height: 100%;
			}

			.el-container,
			.el-main {
				overflow-y: scroll;
				scrollbar-color: transparent transparent;
				scrollbar-track-color: transparent;
				height: 100%;
			}

			.el-header {
				background-color: #458b74;
				color: #fff;
				text-align: center;
				font-size: 25px;
				line-height: 60px;
				border-radius: 5px;
			}
		</style>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
	</head>
	<body>
		<el-container id="app">
			<!-- 标题栏 -->
			<el-header height="70px">
				<el-row>
					<el-col :span="20" :offset="2">My-El-Web</el-col>
					<el-col :span="2">
						<el-dropdown>
							<span style="font-size:25px;color:#fff;cursor:pointer;">
								<i class="el-icon-user-solid"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item style="font-size:18px;">登录</el-dropdown-item>
								<el-dropdown-item style="font-size:18px;">注销</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-col>
				</el-row>
			</el-header>
			<el-container style="margin-top: 15px;">
				<!-- 左侧导航 -->
				<el-aside width="250px">
					<el-menu background-color="#545c64" text-color="#fff" unique-opened="true">
						<el-submenu index="1">
							<template slot="title">
								<span style="font-size:18px;">模块A</span>
							</template>
							<el-menu-item style="font-size:16px;" @click="openWork('/open/work1');">子模块A</el-menu-item>
							<el-menu-item style="font-size:16px;" @click="openWork('/open/work2');">子模块B</el-menu-item>
							<el-menu-item style="font-size:16px;" @click="openWork('/open/work3');">子模块C</el-menu-item>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<span style="font-size:18px;">模块B</span>
							</template>
							<el-menu-item style="font-size:16px;" @click="">子模块A</el-menu-item>
							<el-menu-item style="font-size:16px;" @click="">子模块B</el-menu-item>
							<el-menu-item style="font-size:16px;" @click="">子模块C</el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">
								<span style="font-size:18px;">模块C</span>
							</template>
							<el-menu-item style="font-size:16px;" @click="">子模块A</el-menu-item>
							<el-menu-item style="font-size:16px;" @click="">子模块B</el-menu-item>
							<el-menu-item style="font-size:16px;" @click="">子模块C</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!-- 工作区 -->
				<el-main v-html="work" style="margin-top:-30px;margin-right:-40px;"></el-main>
			</el-container>
		</el-container>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					work: "<iframe frameborder=0 width=100% height=100% src='/open/work1'></iframe>"
				},
				methods: {
					//openWork
					openWork: function(work) {
						this.work = "<iframe frameborder=0 width=100% height=100% src='" + work + "'></iframe>";
					}
				}
			});
		</script>
	</body>
</html>
